﻿@{
    Layout = null;
    ViewBag.Title = "ConfirmarUbicacion";
}
@model IndignaFramework.Models.UsuarioWeb
<html>
<head>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkZuZembP5AbVRO0zEMPWAVW2HYgzicYE&sensor=false">
</script>
<script type="text/javascript">
    function initialize() {

        var lat = '@(Model.Latitud)';
        var lng = '@(Model.Longitud)';
        var myLatlng = new google.maps.LatLng(lat.replace(",", "."), lng.replace(",", "."));

        var myOptions = {
            center: myLatlng,
            zoom: 7,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker2 = new google.maps.Marker({
            position: myLatlng,
            map: map
        });

        var infowindow = new google.maps.InfoWindow({
            content: getWindowInfo('@Model.Nombre', '@Model.Apellido', '@Model.Direccion')
        });

        google.maps.event.addListener(marker2, 'click', function () {
            infowindow.open(map, marker2);
        });

        var marker = new google.maps.Marker({
          draggable: true,
          animation: google.maps.Animation.DROP,
          position: new google.maps.LatLng(myLatlng.lat()-2.4,myLatlng.lng()+3.5),
          map: map
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            //document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
            document.getElementById('elegirnueva').innerHTML = '<form action="/Usuario/CambiarUbicacion/@Model.id?latitud=' + evt.latLng.lat() + '&longitud=' + evt.latLng.lng() + '" method="post"><input type="submit" value="Elegir nueva ubicación"/></form>';
        });

        map.panTo(position);

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    function getWindowInfo(nombre, apellido, dir) {

        return '<div>Nombre: ' + nombre + ' ' + apellido + '<br/>' + dir + '</div>';
    }

</script>
</head>
<body onload="initialize()">

<div style="font-size:25px;font-weight:bold;text-align:center;">Se ha reconocido a la siguiente como su ubicación actual</div> 
<br/>
<div style="width:45%; float:right;">¿Es esta ubicación correcta? Si no lo es arrastre el marcador ubicado en la esquina inferior derecha del mapa hacia su ubicación real y
haga click en "Elegir nueva ubicación". Si la ubicación detectada es correcta haga click en "Confirmar ubicación".
<br/><br/><br/>

<form action="/Usuario/ConfirmarUbicacionPost/" method="post">
<input type="submit" value="Confirmar ubicación"/>
</form>

<div id="elegirnueva"></div>

</div>
<div id="map_canvas" style="width:50%; height:580px;"></div>

<div id="current"></div>

</body>
</html>